<template>
    <!-- 加减器 -->
    <div class="calc">
        <img src="//gw.alicdn.com/tfs/TB1I05Qe1uSBuNjSsplXXbe8pXa-45-40.png?getAvatar=avatar_.webp" alt="" @click="dec(id)">

        <span>
            <input type="text" v-model="num">
        </span>
        <!-- 父父-父-子 -->
        <img src="https://img.alicdn.com/tfs/TB12tL6ThTpK1RjSZFKXXa2wXXa-45-40.png?getAvatar=avatar" alt=""
            @click="add(id)">
    </div>

</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props: {
        num: {
            type: Number
        },
        id: {
            type: Number

        },
        list: []

    },
    methods: {
        
        // 写加减方法，数据通过bus传入父元素，不能赋值，直接传
      async  add(id) {
            this.$bus.$emit('numAdd', { id: this.id, num: this.num + 1 })
            // 勾选更新数据
            const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/updatenum', {
                token: localStorage.getItem("token"),
                cartid: this.list[id].cartid,
                num: this.num
            })
        },
        async  dec(id) {
            if (this.num > 0) {
                this.$bus.$emit('numDec', { id: this.id, num: this.num - 1 })
            }
            // 勾选更新数据
            const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/updatenum', {
                token: localStorage.getItem("token"),
                cartid: this.list[id].cartid,
                num: this.num
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.calc {
    width: 1.8rem;
    height: .44rem;
    margin-left: 2rem;
    font-size: .32rem;

    span {
        background: url(https://img.alicdn.com/tfs/TB1_d5ZMFzqK1RjSZFvXXcB7VXa-72-40.png?getAvatar=avatar);

        input {
            width: .8rem;
            text-align: center;
        }
    }
}

.calc img {
    width: .5rem;
}
</style>